<template>
  <div class="experts-box" v-if="list.length" @click="onMore">
    <div class="title">
      专家库
      <div class="more-btn">更多</div>
    </div>
    <div class="experts-list">
      <div class="scroll-box" :style="{top: posTop + 'px'}">
        <el-row :gutter="40">
          <el-col :span="12" v-for="(item, index) of list" :key="index">
            <div class="item-box">
              <div class="avatar" :style="{backgroundImage: 'url(' + item.smallImage + ')'}"></div>
              <div class="user-content">
                <div class="name">
                  {{item.name}}
                  <div class="right-btn"></div>
                </div>
                <div class="desc">{{item.job}}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { expertsList } from '@/api/api';

export default {
  data() {
    return {
      list: [],
      timer: '',
      posTop: 0
    }
  },
  mounted() {
    this.getList();
    this.timer = setInterval(this.intervalFn, 10000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    intervalFn() {
      this.posTop -= 97;
      const maxNum = Math.ceil(this.list.length / 4) * (-97);
      if (this.posTop < maxNum) {
        this.posTop = 0;
      }
    },
    // 获取专家列表
    async getList() {
      const params = {
        status: 1
      };
      const res = await expertsList(params);
      this.list = res.list || [];
    },
    // 更多
    onMore() {
      let routerJump = this.$router.resolve({ name: 'Institute', query: {position: 'experts'} });
      window.open(routerJump.href, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>
.experts-box {
  cursor: pointer;
  .title {
    height: 32px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #272727;
    line-height: 32px;
    margin-bottom: 32px;
    .more-btn {
      height: 18px;
      font-size: 14px;
      
      font-weight: 400;
      color: #696969;
      line-height: 18px;
      margin-top: 7px;
      float: right;
      cursor: pointer;
    }
  }
  .experts-list {
    height: 194px;
    overflow: hidden;
    position: relative;
    .scroll-box {
      position: absolute;
      top: 0;
      left: 0;
      .item-box {
        overflow: hidden;
        margin-bottom: 33px;
        .avatar {
          width: 64px;
          height: 64px;
          border-radius: 64px;
          margin-right: 12px;
          background-size: cover;
          float: left;
        }
        .user-content {
          float: left;
          width: 284px;
          .name {
            margin-top: 7px;
            margin-bottom: 6px;
            height: 24px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #272727;
            line-height: 24px;
            .right-btn {
              width: 18px;
              height: 18px;
              background: url('../../../assets/right.png');
              background-size: cover;
              float: right;
              margin-top: 3px;
            }
          }
          .desc {
            height: 20px;
            font-size: 14px;
            
            font-weight: 400;
            color: #696969;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>